// src/components/LeftSidebar.tsx
import React from "react";
import type { MissionType } from "../App"; // 导入 MissionType 类型
import { AIRPORT_COORDS } from "./utils"; // 导入默认机场坐标
interface LeftSidebarProps {
  onNewTaskClick: () => void;
  currentMissionType: MissionType; // 新增 prop
  drawnPolygon: L.Polygon | null; // 新增 prop
  isSettingTakeoffPoint: boolean; // 新增 prop
  onSetTakeoffPointMode: (enabled: boolean) => void; // 新增 prop
  takeoffPoint: L.LatLng | null; // 新增 prop
}

const LeftSidebar: React.FC<LeftSidebarProps> = ({
  onNewTaskClick,
  currentMissionType,
  drawnPolygon,
  isSettingTakeoffPoint,
  onSetTakeoffPointMode,
  takeoffPoint,
}) => {
  // 按钮是否应该启用（即允许用户点击来设置起飞点）
  // 只要选择了任务类型，就可以设置起飞点
  const isSetTakeoffPointButtonEnabled = currentMissionType !== null;

  // 判断当前起飞点是否是默认机场坐标
  const isDefaultTakeoffPoint =
    takeoffPoint.lat === AIRPORT_COORDS[0] &&
    takeoffPoint.lng === AIRPORT_COORDS[1];
  return (
    <div className="flex flex-col w-64 min-w-[250px] bg-[#2a2a2a] p-4 border-r border-[#3a3a3a]">
      <div className="text-2xl font-bold text-[#007bff] mb-5 text-center">
        TERRA
      </div>
      <div className="flex mb-5 border-b border-[#3a3a3a]">
        <div className="flex-1 text-center py-2 cursor-pointer text-[#a0a0a0] hover:text-[#e0e0e0] transition-colors duration-300 active-tab">
          重建任务
        </div>
        <div className="flex-1 text-center py-2 cursor-pointer text-[#a0a0a0] hover:text-[#e0e0e0] transition-colors duration-300">
          航线任务
        </div>
      </div>
      <div className="flex-grow overflow-y-auto mb-4">
        <div className="mb-2">
          <input
            type="text"
            placeholder="搜索"
            className="w-full p-2 border border-[#4a4a4a] bg-[#3a3a3a] text-[#e0e0e0] rounded-md text-sm"
          />
        </div>
        <div className="p-2 border-b border-[#3a3a3a] cursor-pointer text-[#b0b0b0] hover:bg-[#3a3a3a] text-sm">
          获取 样例任务
        </div>
        {/* 新增：设置起飞点按钮 */}
        {currentMissionType && ( // 只有在选择了任务类型时显示
          <button
            className={`w-full py-2 mt-4 rounded-md text-base transition-colors duration-300
                        ${
                          isSettingTakeoffPoint
                            ? "bg-yellow-600 text-white"
                            : "bg-[#007bff] text-white hover:bg-[#0056b3]"
                        }
                        ${
                          !isSetTakeoffPointButtonEnabled
                            ? "opacity-50 cursor-not-allowed"
                            : "cursor-pointer"
                        }`}
            onClick={() => onSetTakeoffPointMode(!isSettingTakeoffPoint)}
            disabled={!isSetTakeoffPointButtonEnabled}
          >
            {isSettingTakeoffPoint
              ? "点击地图设置起飞点..."
              : isDefaultTakeoffPoint
              ? "设置起飞点"
              : "重新设置起飞点"}
          </button>
        )}
        {/* 更多任务列表项 */}
      </div>
      <button
        className="bg-[#007bff] text-white py-3 rounded-md text-base cursor-pointer hover:bg-[#0056b3] transition-colors duration-300"
        onClick={onNewTaskClick}
      >
        新建任务
      </button>
    </div>
  );
};

export default LeftSidebar;
